<script setup lang="ts">
import { ref, nextTick } from 'vue';

interface Message {
  role: 'user' | 'ai';
  content: string;
  streaming?: boolean;
}

const messages = ref<Message[]>([]);
const input = ref('');
const chatContainer = ref<HTMLDivElement | null>(null);

// 新增：自动滚动标志
const isAutoScroll = ref(true);

// 监听滚动事件
function onScroll() {
  if (!chatContainer.value) return;
  const { scrollTop, scrollHeight, clientHeight } = chatContainer.value;
  // 离底部小于50px时，允许自动滚动，否则认为用户手动滚动了
  isAutoScroll.value = scrollHeight - (scrollTop + clientHeight) < 50;
}

// 模拟AI流式回复
async function aiReplyStream(text: string) {
  const aiMsg: Message = { role: 'ai', content: '', streaming: true };
  messages.value.push(aiMsg);
  const _msgIndex = messages.value.length - 1;
  await nextTick();
  scrollToBottom();

  for (let i = 0; i < text.length; i++) {
    messages.value[_msgIndex].content += text[i];
    // aiMsg.content += text[i];
    // console.log('text ===>', text[i])
    await nextTick();
    scrollToBottom();
    await new Promise(res => setTimeout(res, 10));
  }
  aiMsg.streaming = false;
}

// 发送消息
async function send() {
  if (!input.value.trim()) return;
  messages.value.push({ role: 'user', content: input.value });
  isAutoScroll.value = true
  await nextTick();
  scrollToBottom();

  const userInput = input.value;
  input.value = '';
  // 这里可以替换为真实的AI接口
  aiReplyStream('你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。你好，这是一条AI流式回复的示例。');
}

// 修改：只有在 isAutoScroll 为 true 时才自动滚动
function scrollToBottom() {
  nextTick(() => {
    if (chatContainer.value && isAutoScroll.value) {
      chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
    }
  });
}
</script>

<template>
  <div class="chat-root">
    <div class="chat-container" ref="chatContainer" @scroll="onScroll">
      <div
        v-for="(msg, idx) in messages"
        :key="idx"
        :class="['msg', msg.role, { streaming: msg.streaming }]"
      >
        <span class="role">{{ msg.role === 'user' ? '🧑' : '🤖' }}</span>
        <span class="content">{{ msg.content }}</span>
      </div>
    </div>
    <div class="input-bar">
      <input
        v-model="input"
        @keyup.enter="send"
        placeholder="请输入内容..."
      />
      <button @click="send">发送</button>
    </div>
  </div>
</template>

<style scoped>
.chat-root {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f4f4f4;
}
.chat-container {
  flex: 1;
  overflow-y: auto;
  padding: 24px 0 12px 0;
  display: flex;
  flex-direction: column;
}
.msg {
  display: flex;
  align-items: flex-end;
  margin: 4px 16px;
  font-size: 16px;
  line-height: 1.6;
  word-break: break-all;
}
.msg.user {
  justify-content: flex-end;
}
.msg.ai {
  justify-content: flex-start;
}
.role {
  margin: 0 8px;
  font-size: 20px;
}
.content {
  background: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  max-width: 70vw;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.input-bar {
  display: flex;
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid #eee;
}
input {
  flex: 1;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #ddd;
  font-size: 16px;
  outline: none;
}
button {
  margin-left: 8px;
  padding: 8px 18px;
  border: none;
  background: #409eff;
  color: #fff;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
}
.cursor {
  display: inline-block;
  width: 8px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
</style>